<template>
  <div class="basic-components-page">
    <section class="section">
      <p class="title">基础</p>
      <div class="list-box">
        <draggable
          class="u-f u-fw"
          v-model="list"
          :group="{ name: 'menu', put: false, pull: 'clone' }"
          :sort="false"
          :clone="handleClone"
          item-key="type"
        >
          <template #item="item">
            <div class="list u-f u-f-ac">
              <DeploymentUnitOutlined class="a-icon" />
              <span class="text">{{ item.element.name }}</span>
            </div>
          </template>
        </draggable>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { DeploymentUnitOutlined } from '@ant-design/icons-vue'
import { uuid } from '@/assets/ts/util'
import { basicJson } from '@/assets/ts/basic-material/basic-components'
import { cloneDeep } from 'lodash'
import draggable from 'vuedraggable'
import { BasicItem } from '@/assets/ts/basic-material/basic-components.type'

export default defineComponent({
  name: 'BasicComponents',
  components: {
    DeploymentUnitOutlined,
    draggable,
  },
  setup() {
    const list = ref(basicJson)

    const handleClone = (comp: BasicItem) => {
      // 处理拖拽到画布区域的数据，在这里可以对原数据进行更改
      // 如果不重新进行深克隆处理，拖拽到画布区域的只是一个引用，会影响同一类型的组件数据
      const newOption = cloneDeep(comp)
      newOption.key = newOption.type + '_' + uuid()
      return newOption
    }

    return {
      list,
      handleClone,
    }
  },
})
</script>

<style lang="less" scoped>
.basic-components-page {
  padding-top: 20px;
  .section {
    margin-bottom: 20px;
    .title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 700;
      padding-left: 8px;
      margin-bottom: 10px;
    }
    .list-box {
      .list {
        cursor: pointer;
        width: 128px;
        height: 36px;
        margin: 8px 0 0 8px;
        padding: 0 8px;
        border-radius: 6px;
        border: 1px solid #e5e6e8;
        box-sizing: border-box;
        &:hover {
          border-color: #0089ff;
          .a-icon,
          .text {
            color: #0089ff;
          }
        }
        .a-icon {
          font-size: 14px;
          margin-right: 8px;
        }
        .text {
          font-size: 12px;
        }
      }
    }
  }
}
</style>